<template>
  <el-dialog :title="$t('message.ddqr')" :visible.sync="dialogMessageTableVisible" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog" width="60%" @close="close">
    <el-form ref="form" class="doumee-form" :model="param" label-width="auto" @submit.native.prevent>
      <div class="property-title">{{ $t('message.xzhy') }}</div>
      <el-form-item :label="$t('message.searchhy')">
        <div style="width:60%">
          <el-input v-model="cardNum" :placeholder="$t('message.qsr') + $t('message.hy1')" class="input-with-select bottom-speace-style" @keyup.enter.native="searchAction">
            <el-button slot="append" icon="el-icon-search" @click="searchAction" />
          </el-input>
          <div v-if="showMessage" class="card-message">
            <div class="first-line">
              <span class="message-title-style">NO.</span>
              <span class="message-value-style">{{ cardMessage.number }}</span>
              <span class="message-value-style">{{ cardMessage.nickName }}</span>
              <span v-if="cardMessage.cardName" class="card-name-style">{{ cardMessage.cardName }}</span>
              <button class="message-title-style close-style" @click="closeMessage">x</button>
            </div>
            <div class="first-line">
              <span class="message-title-style">{{ $t('message.sj') }}：</span>
              <span class="message-value-style">{{ cardMessage.phone }}</span>
              <span class="message-title-style">{{ $t('message.czje') }}：</span>
              <span class="message-value-style">{{ cardMessage.remainingMoney?cardMessage.remainingMoney:0 }}</span>
              <span class="message-title-style">{{ $t('message.zsje') }}：</span>
              <span class="message-value-style">{{ cardMessage.remainingGiveMoney?cardMessage.remainingGiveMoney:0 }}</span>
              <!-- <span class="message-title-style">余额：</span>
              <span class="message-value-style">{{ cardMessage.money }}</span> -->
            </div>
          </div>
        </div>
      </el-form-item>

      <div class="property-title">{{ $t('message.ddxx') }}</div>
      <el-table
        :data="selectedMessage"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column align="center" :label="$t('message.tcname')" prop="name" />
        <el-table-column align="center" :label="$t('message.lx')" prop="name">
          <template slot-scope="scope">
            <span class="count-style">{{ scope.row.mealsType == '0' ? $t('message.mpcsk') : scope.row.mealsType == '1'? $t('message.mpqxk'):$t('message.ydck') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.cs')" prop="nums" />
        <el-table-column align="center" :label="$t('message.zscs')">
          <template slot-scope="scope">
            <el-input-number v-if="scope.row.mealsType !== '1'" v-model="scope.row.giveNums" :disabled="!zsmoney" size="small" :step="1" step-strictly :min="0" :label="$t('message.zscs')" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.yxq')" prop="indate" />
        <el-table-column align="center" :label="$t('message.num')">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.count" :min="1" size="small" :step="1" step-strictly :label="$t('message.num')" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.price')" prop="price" />
      </el-table>
      <el-form-item />
    </el-form>
    <div slot="footer" class="footer-style">
      <div class="bottom-left">
        <div>
          <span class="sum-title-style">{{ $t('message.ddje') }}：</span>
          <span class="sum-pay-value-style">{{ totalMoney }}</span>
        </div>
      </div>
      <div class="bottom-right">
        <el-button v-preventReClick type="primary" @click="createOrder">{{ $t('message.qrfk') }}</el-button>
        <el-button @click="dialogMessageTableVisible=false">{{ $t('message.qx') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { VIPInfo, configList } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      dialogMessageTableVisible: false,
      param: {
        date: parseTime(new Date())
      },
      cardNum: '',
      showMessage: false,
      zsmoney: false,
      cardMessage: {},
      selectedMessage: []
    }
  },
  computed: {
    totalMoney() {
      let money = 0.0
      this.selectedMessage.forEach(item => {
        money += item.price * item.count
      })
      return money
    }
  },
  mounted() {
    this.getDefalutConfig()
  },
  methods: {
    getDefalutConfig() {
      configList({ param: { type: '6' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const list = res.recordList
          const objb = list.find(item => item.code === 'PRESENT_NUM_CONFIG')
          if (objb && objb.name) {
            this.zsmoney = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    open(message) {
      this.selectedMessage = message
      this.dialogMessageTableVisible = true
    },
    closeMessage() {
      this.showMessage = false
      this.cardMessage = {}
    },
    searchAction() {
      if (!this.cardNum.length) {
        this.$message.info(this.$t('message.qsr') + this.$t('message.hy1'))
        return
      }
      VIPInfo({ param: {
        phoneOrNo: this.cardNum
      }})
        .then(res => {
          if (res.errorCode === '000000') {
            this.cardMessage = res.record
            this.showMessage = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    createOrder() {
      // this.dialogTableVisible = true
      if (!this.cardMessage.id) {
        this.$message.error(this.$t('message.qxczhy'))
        return
      }
      const p = []
      this.selectedMessage.forEach(item => {
        p.push({
          id: item.id,
          num: item.count,
          type: '2',
          giveNum: item.giveNums
        })
      })
      this.dialogMessageTableVisible = false
      this.$emit('confirm', { cardMessage: this.cardMessage, p })
    },
    close() {
      this.cardNum = ''
      this.cardMessage = {}
      this.showMessage = false
      this.$parent.getMeals()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.bottom-speace-style {
  margin-bottom: 10px;
}
.card-message {
  // width: 70%;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
    color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.bottom-left {
  margin-left: 20px;
  height: 20px;
  margin-top: 15px;
  .sum-title-style {
    font-size: 15px;
    color: #222;
  }
  .sum-pay-value-style {
    font-size: 17px;
    font-weight: 500;
    color: $SecondColor;
  }
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -30px -30px;
  height: 50px;
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}
.slelect-pay-style {
  background-color: $primaryColor;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}
</style>
